import { constCommonRouter } from '@/router'
import Layout from '@/views/layout/Layout'

import { getMenuTree } from '../../api/menu'

const permission = {

  state: {
    allRouters: [],
    addRouters: [
      // {
      //   path: '/sys',
      //   name: 'Layout',
      //   component: 'Layout',
      //   meta: { icon: 'el-icon-user', title: '系统管理' },
      //   children: [
      //     {
      //       path: 'user',
      //       name: 'sysUser',
      //       component: 'sys/sysUser',
      //       meta: { icon: 'el-icon-user', title: '用户管理' }
      //     },
      //     {
      //       path: 'dept',
      //       name: 'sysDept',
      //       component: 'sys/sysDept',
      //       meta: { icon: 'el-icon-user', title: '部门管理' }
      //     },
      //     {
      //       path: 'role',
      //       name: 'sysRole',
      //       component: 'sys/sysRole',
      //       meta: { icon: 'el-icon-user', title: '角色管理' }
      //     },
      //     {
      //       path: 'menu',
      //       name: 'sysMenu',
      //       component: 'sys/sysMenu',
      //       meta: { icon: 'el-icon-user', title: '菜单管理' }
      //     }
      //   ]
      // },
      // {
      //   path: '/perm',
      //   name: 'Layout',
      //   component: 'Layout',
      //   meta: {icon: 'el-icon-user', title: '权限管理'},
      //   children: [
      //     {
      //       path: 'dept',
      //       name: 'permDept',
      //       component: 'perm/permDept',
      //       meta: {icon: 'el-icon-user', title: '部门用户管理'}
      //     },
      //     {
      //       path: 'role',
      //       name: 'permRole',
      //       component: 'perm/permRole',
      //       meta: {icon: 'el-icon-user', title: '角色用户管理'}
      //     }
      //   ]
      // }
    ]
  },

  mutations: {
    setRouters: (state, routers)=> {
      state.addRouters = routers
      state.allRouters = constCommonRouter.concat(routers)
    }
  },

  actions: {
    //生成路由
    generateRouters: ({ state, commit })=> {
      return new Promise( resolve => {
        getMenuTree().then(res=>{
          const resultRouter = filterRouter(res.data.data.menu_tree)
          commit('setRouters', resultRouter)
          resolve(resultRouter)
        },err=>{})
      })
    }
  },

  getters: {

  }

}

/**
 * 遍历后台传来的路由字符串，并将组件字符串转换为组件对象
 */
function filterRouter(routerStr) {
  if(routerStr) {
    return routerStr.filter(route => {
      if(route.component) {
        if(route.component === 'Layout') {
          route.component = Layout
        }else {
          // route.component = ()=> { return ()=> import(`@/views/${route.component}`) }
          route.component = loadView(route.component)
        }
        if(route.children && route.children != null && route.children.length != 0) {
          route.children =filterRouter(route.children)
        }
        return true
      }
    })
  }
  return [];
}

export const loadView = view =>{
  return ()=> import(`@/views/${view}`)
}

export default permission

